<template>
  <base-chart :options="chartOptions" :height="height" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { EChartsOption } from 'echarts'
import BaseChart from './BaseChart.vue'
import { generatePredictionData } from '@/utils/mockData'

const props = defineProps<{
  height?: string
}>()

const data = generatePredictionData()

const chartOptions = computed<EChartsOption>(() => ({
  tooltip: {
    trigger: 'axis',
    formatter: (params: any) => {
      const actual = params[0]
      const predicted = params[1]
      return `${actual.name}<br/>
              ${actual.seriesName}: ${actual.value} kWh<br/>
              ${predicted.seriesName}: ${predicted.value} kWh`
    }
  },
  legend: {
    data: ['实际值', '预测值']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: data.map(item => item.time),
    axisLabel: {
      formatter: (value: string) => value.split(' ')[1]
    }
  },
  yAxis: {
    type: 'value',
    name: '能耗 (kWh)',
    axisLabel: {
      formatter: '{value}'
    }
  },
  series: [
    {
      name: '实际值',
      type: 'line',
      smooth: true,
      data: data.map(item => item.value),
      lineStyle: {
        width: 2
      },
      itemStyle: {
        borderWidth: 2
      }
    },
    {
      name: '预测值',
      type: 'line',
      smooth: true,
      data: data.map(item => item.predicted),
      lineStyle: {
        width: 2,
        type: 'dashed'
      },
      itemStyle: {
        borderWidth: 2
      }
    }
  ]
}))
</script> 